<template>
  <div class="box">
    <my-title-header :title="title"></my-title-header>
    <div class="item-box">
      <div class="item" v-for="(item,index) in packageList">
        <div class="item-header">
          <i class="iconfont" :class="item.package_companyType>2?'icon-time':'icon-chongliuliang'"></i>
          <span><b>{{item.package_companyType>2?'流量套餐':'时长套餐'}}</b></span>
        </div>
        <hr class="renew-hr"/>
        <div class="item-body">
          <div class="item-section">
            <div class="icon-box">
              <i class="iconfont icon-icon-calendar"></i>
            </div>
            <div class="item-section-content">
              <div class="item-section-top">
                <p class="limit-time">限时购</p>
                <p class="description">&nbsp;<b>{{item.package_name}}</b><span>{{item.package_companyType>2?'（不限上网速率）':'（不限流量套餐）'}}</span>
                </p>
              </div>
              <div class="item-section-bottom">
                <p class="price">￥{{item.package_price}}</p>
                <div class="number-box">
                  <span @click="decline(index)">-</span>
                  <input type="text" class="number" v-model="item.number"/>
                  <span @click="add(index)">+</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item-section-footer">
            <div>{{item.package_introduce}}</div>
          </div>
          <div class="logo-box" @click="choosePackage(index)">
            <i class="iconfont " :class="item.isChecked?'icon-gou':'icon-yuanquanweixuanfuben'"></i>
          </div>
        </div>
        <hr class="renew-hr"/>
        <div class="item-footer">
          <span>使用范围</span>
          <span class="float-right">{{item.place_name}}</span>
        </div>
      </div>
    </div>
    <footer class="settlement">
      <div class="settlement-left">
        <label>总计费用</label>
        <span class="price">￥{{totalPrice}}</span>
      </div>
      <div class="settlement-right">
        <button v-on:click="settlement">结算</button>
      </div>
    </footer>
  </div>
</template>

<script>
  import TitleHeader from '../components/TitleHeader.vue';
  import {Toast} from 'mint-ui';

  export default {
    name: "",
    created() {
      localStorage.removeItem('isFirst');
      let list = JSON.parse(localStorage.getItem('packageList'));
      for (let index = 0; index < list.length; index++) {
        list[index].number = 1;
        list[index].isChecked = false;
      }
      this.packageList = list;
    },
    components: {
      'my-title-header': TitleHeader
    },
    computed: {

      //计算订单总价
      totalPrice: function () {
        if (this.index !== -1) {
          let price = this.packageList[this.index].package_price;
          let number = this.packageList[this.index].number;
          return price * number;
        } else {
          return 0;
        }
      },
    },
    data() {
      return {
        title: '上网续费',
        number: 1,
        isChecked: false,
        accessCode: null,
        data: {},
        packageList: [],
        index: -1
      }
    },
    methods: {
      //每点击一次+，添加相应数字
      add: function (index) {
        let number = this.packageList[index].number;
        console.log(this.packageList[index].number);
        this.$set(this.packageList[index], 'number', ++number);
      },
      //每点击一次-，减少相应数字
      decline: function (index) {
        if (this.packageList[index].number > 1) {
          this.$set(this.packageList[index], 'number', --this.packageList[index].number);
        }
      },
      settlement: function () {
        if (this.index === -1) {
          Toast('请选择套餐');
        } else {
          let item = this.packageList[this.index];
          let obj = {
            code: localStorage.getItem('code'),
            user_id: JSON.parse(localStorage.getItem('placeList'))[0].user_id,
            place_id: item.place_id,
            package_id: item.package_id,
            pay_price: item.package_price,
            pay_num: item.number,
            // pay_state: 0,
            device_id: 'wechat001',
            total_price: this.totalPrice,
            package_name: item.package_name,
            pay_type: 2,
            package_type: item.package_companyType > 2 ? '时长套餐' : '流量套餐'
          };
          this.$store.dispatch('pay', obj);
        }
      }
      ,
      /***
       * 当点击选择不同套餐时
       */
      choosePackage: function (index) {
        for (let i = 0; i < this.packageList.length; i++) {
          this.$set(this.packageList[i], 'isChecked', false);
        }
        this.$set(this.packageList[index], 'isChecked', true);
        this.index = index;
      },
      /**
       * 验证手机号
       * @returns {boolean}
       */
      checkMobile: function () {
        var sMobile = this.tel.trim().substr(0, 3) + this.tel.substr(4, 4) + this.tel.substr(9, 4);
        if (!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(sMobile))) {
          return false;
        } else {
          return true;
        }
      }
    },


  }
</script>

<style scoped>
  @import '../assets/iconfont/iconfont.css';

  .box {
    font-size: 0.14rem;
    height: 100%;
    background-color: rgba(239, 239, 239, 1);
    color: rgba(16, 16, 16, 1);
    font-family: Arial;
  }

  .float-right {
    float: right;
  }

  .checked {
    background: url("../assets/images/item_check.png") center;
  }

  .no-check {
    background: url("../assets/images/no_item_check.png") center;
  }

  .item-header, .item-footer {
    line-height: 0.4rem;
    text-align: left;
    padding: 0 0.1rem;
    font-size: 0.14rem;
  }

  .item-header .iconfont {
    font-size: 0.16rem;
    color: rgba(16, 16, 16, 1);
  }

  .item-header span {
    vertical-align: 0.02rem;
  }

  .item-footer {
    padding: 0 0.16rem 0 0.27rem;
  }

  .item-header img {
    width: 0.24rem;
    height: 0.24rem;

    vertical-align: middle;
    margin-right: 0.06rem;
  }

  .renew-hr {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 0;
    color: #bbbbbb;
  }

  .item-header b {
    vertical-align: middle;
  }

  .item-box {
    background-color: rgba(239, 239, 239, 1);
    padding-bottom: 0.5rem;
  }

  .item-box .item {
    margin-bottom: 0.19rem;
    background-color: #ffffff;
  }

  .item-body {
    position: relative;
    font-size: 0.14rem;
  }

  .item-body .logo-box {
    position: absolute;
    top: 50%;
    left: 0.14rem;
    cursor: pointer;
    transform: translateY(-50%);
  }

  .item-body .logo-box .iconfont {
    cursor: pointer;
    font-size: 0.24rem;
  }

  .item-body .logo-box . icon-gou {
    color: red
  }

  .item-body .logo-box img {
    display: inline-block;
    width: 0.22rem;
    height: 0.22rem;
  }

  .item-section {
    text-align: left;
    position: relative;
    padding: 0.1rem 0;
  }

  .item-section .icon-box {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    text-align: center;
    line-height: 0.65rem;
    margin-top: 0.025rem;
    margin-left: 0.46rem;
    font-size: 0.40rem;
  }

  .item-section .icon-box .iconfont {
    font-size: 0.4rem;
  }

  .logo-box .icon-gou {
    color: #e51c23;
  }

  .item-section-footer {
    width: 100%;
    margin-bottom: 0.12rem;
    box-sizing: border-box;
    padding: 0 0.15rem 0 0.27rem;
  }

  .item-section-footer > div {
    width: 100%;
    height: 0.31rem;
    line-height: 0.31rem;
    border-radius: 4px;
    background-color: rgba(244, 248, 251, 1);
    color: rgba(117, 118, 122, 1);
    font-size: 0.12rem;
    text-align: center;
  }

  .item-section-top, .item-section-bottom {
    width: 2.28rem;
  }

  .item-section-top p, .item-section-bottom p, .item-section-bottom div {
    float: left;
  }

  .item-section-top .limit-time {
    border: 1px solid #E51C23;
    padding: 0 0.03rem;
    line-height: 0.2rem;
    height: 0.2rem;
    margin-top: 0.07rem;
    font-size: 0.12rem;
    box-sizing: border-box;
  }

  .item-section-top .description {

  }

  .price {
    color: #E51C23;
    font-size: 0.16rem;
  }

  .item-section-bottom .number-box {
    width: 0.96rem;
    height: 0.24rem;
    overflow: hidden;
    line-height: 0.24rem;
    margin-top: 0.055rem;
    margin-left: 0.46rem;
    border-radius: 3px;
    border: 1px solid #bbbbbb;
  }

  .number-box span {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 0.25rem;
    height: 0.24rem;
    text-align: center;
  }

  .number-box .number {
    margin: 0;
    padding: 0;
    width: 0.36rem;
    height: 0.24rem;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: center;
    border: none;
    font-size: 0.14rem;
    outline: none;
  }

  .item-section-content {
    float: right;
  }

  .item-section-content > div {
    height: 0.35rem;
    line-height: 0.35rem;
  }

  .settlement {
    width: 100%;
    text-align: left;
    line-height: 0.5rem;
    position: fixed;
    background-color: #ffffff;
    bottom: 0;
  }

  .settlement .settlement-left {
    float: left;
    margin-left: 0.16rem;
  }

  .settlement .settlement-right {
    float: right;

  }

  .settlement button {
    width: 1.15rem;
    height: 0.5rem;
    box-sizing: border-box;
    border: none;
    color: #ffffff;
    background-color: rgba(252, 45, 72, 1);
    font-size: 0.16rem;
  }
</style>
